<!--
 * @Autor: dingxiaolin
 * @Date: 2021-06-29 10:38:34
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2021-07-27 15:24:46
-->
<template>
    <a-modal
        title="授权角色"
        centered
        :width="980"
        :maskClosable="false"
        :visible="visible"
        :confirmLoading="confirmLoading"
        @ok="handleSubmit"
        @cancel="visible = false"
    >
        <a-card :bordered="false">
            <a-table
                :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                :columns="columns"
                :dataSource="loadData"
                :pagination="false"
                :loading="loading"
                :rowKey="(record) => record.id"
            />
        </a-card>
    </a-modal>
</template>

<script lang='ts'>
import { defineComponent, toRaw, reactive, toRefs, ref, computed, watch, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from '@/store'
import { getCurrentRole, getRolePage } from '@/api/system/role'
import { sysUserOwnRole, sysUserGrantRole } from '@/api/system/user'
import { ColumnProps } from 'ant-design-vue/es/table/interface'
import { message } from 'ant-design-vue'
import { objReduce } from '@/utils/common'

type Key = ColumnProps['key']
export default defineComponent({
    name: 'userRoleForm',
    components: {},
    emits: ['refresh'],
    setup(props, ctx) {
        const router = useRouter()
        const store = useStore()
        const state = reactive({
            columns: [
                {
                    title: '角色名称',
                    dataIndex: 'name'
                },
                {
                    title: '唯一编码',
                    dataIndex: 'code'
                }
            ],
            confirmLoading: false,
            visible: false,
            loading: false,
            loadData: [] as any,
            userid: '',
            selectedRowKeys: [] as string[],
            recordEntity: []
        })
        const onSelectChange = (selectedRowKeys: string[]) => {
            state.selectedRowKeys = selectedRowKeys
        }
        function handleSubmit() {
            sysUserGrantRole({ id: state.userid, grantRoleIdList: state.selectedRowKeys }).then((res) => {
                message.success('授权成功')
                state.visible = false
                ctx.emit('refresh')
            })
        }
        onMounted(() => {})
        const initData = (id) => {
            state.recordEntity = []
            state.selectedRowKeys = []
            state.userid = id
            state.visible = true
            getCurrentRole({ id: id }).then((data) => {
                state.selectedRowKeys = data
                getRolePage({}).then((res) => {
                    state.loadData = res.rows
                    if (data.length > 0) {
                        getRolePage({
                            idList: data[0]
                        }).then((v) => {
                            state.loadData = objReduce([...state.loadData, ...v.rows], 'id')
                            v.rows.forEach((vv) => {
                                if (!state.selectedRowKeys.includes(vv.id)) {
                                    state.selectedRowKeys.push(vv.id)
                                }
                            })
                        })
                    }
                })
            })
        }
        return {
            ...toRefs(state),
            initData,
            handleSubmit,
            onSelectChange
        }
    }
})
</script>

<style lang='scss' scoped>
</style>
